<template lang="html">
  <div class="invoice-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:16px">发票设置</span>
      </div>
      <div class="setup-invoice">
        <div class="add-invoice">
          <el-button  class="add-invoice-button" v-if="invoiceData&&invoiceData.length!=0" @click="handleShowDialogInvoice()" plain>新增发票信息</el-button>
        </div>
        <div class="invoice-nodata" v-if="!invoiceData||invoiceData.length==0">
          <img src="@/assets/images/member/notorder.png" />
          <p>暂时还没添加任何发票哦，<a @click="handleShowDialogInvoice()">立即添加</a>~</p>
        </div>
        <div class="invoice-table" v-else>
          <el-table
              :data="invoiceData"
              align ="center">
              <el-table-column
                label="序号"
                width="118px"
                type="index"
                align="center">
              </el-table-column>
              <el-table-column
                label="发票类型"
                width="182px"
                align="center">
                <template slot-scope="scope">
                  {{scope.row.invoiceType|invoiceTypes}}
                </template>
              </el-table-column>
              <el-table-column
                prop="invoiceInfo"
                label="发票信息"
                width="428px"
                header-align="center">
                <template slot-scope="scope">
                  <ul>
                      <li><span>发票抬头：</span>{{scope.row.title}}</li>
                      <div v-if="scope.row.invoiceType!=1">
                        <li><span>纳税人识别号：</span>{{scope.row.taxPayerCode}}</li>
                        <div v-if="scope.row.invoiceType!=2">
                          <li><span>注册地址：</span>{{scope.row.companyAddress}}</li>
                          <li><span>注册电话：</span>{{scope.row.telephone}}</li>
                          <li><span>开户银行：</span>{{scope.row.bankName}}</li>
                          <li><span>银行账户：</span>{{scope.row.backAccount}}</li>
                        </div>

                      </div>

                  </ul>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="182px"
                align="center">
                <template slot-scope="scope">
                  <el-button type="text"  @click="handleLook(scope.row)" >编辑</el-button>
                  <span class = "delete-button">
                      <el-button @click="handleDelInvoice(scope.row.id)" type="text" >删除</el-button>
                  </span>
                </template>
              </el-table-column>
            </el-table>


        </div>
      </div>
    </el-card>


    <el-dialog :title="dialogTitle" :visible.sync="dialogInvoiceInfo" custom-class="form-invoice-dialog" width="780px" @close="dialogInvoiceInfoClose()">
      <div class="invoice-info">
        <div class="info-title">发票类型</div>
        <div class="info-list">
          <span :class="{'active': invoiceTypeIndex == i}" v-for="(item, i) in invoiceType" @click="handleChangeInvoiceType(i)">{{ item }}<img src="@/assets/images/cart/icon-checked-arrow-small.png" class="icon" /></span>
        </div>
        <!--不开发票-->
        <div >
          <div class="info-title">发票信息</div>
          <!--增值税发票-->
          <div v-if="invoiceShowListTag != 3">
            <div class="info-list">
              <span :class="{'active': invoiceInfoIndex == i}" v-for="(item, i) in invoiceInfo" @click="handleChangeInvoiceInfo(i)">{{ item }}<img src="@/assets/images/cart/icon-checked-arrow-small.png" class="icon" /></span>
            </div>
          </div>

          <div class ="add-invoice-info">
            <el-form :model="formInvoice" :rules="rulesInvoice" ref="formInvoice" label-width="130px">
              <el-form-item label="发票抬头" prop="title">
                <el-input v-model="formInvoice.title" placeholder="请输入发票抬头" maxlength="50"></el-input>
              </el-form-item>
               <el-form-item label="纳税人识别号" prop="taxPayerCode" v-if="invoiceShowListTag == 2 || invoiceShowListTag == 3">
                <el-input v-model="formInvoice.taxPayerCode" placeholder="请输入纳税人识别号"></el-input>
              </el-form-item>
              <el-form-item label="注册地址" prop="companyAddress" v-if="invoiceShowListTag == 3">
                <el-input v-model="formInvoice.companyAddress" placeholder="请输入注册地址" maxlength="50"></el-input>
              </el-form-item>
              <el-form-item label="注册电话" prop="telephone" v-if="invoiceShowListTag == 3">
                <el-input v-model="formInvoice.telephone" placeholder="请输入注册电话" maxlength="11"></el-input>
              </el-form-item>
              <el-form-item label="开户银行" prop="bankName" v-if="invoiceShowListTag == 3">
                <el-input v-model="formInvoice.bankName" placeholder="请输入开户银行" maxlength="30"></el-input>
              </el-form-item>
              <el-form-item label="银行账户" prop="backAccount" v-if="invoiceShowListTag == 3">
                <el-input v-model="formInvoice.backAccount" placeholder="请输入银行账户" maxlength="30"></el-input>
              </el-form-item>
            </el-form>
          </div>

        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click=" handleCancelSave()">取 消</el-button>
          <el-button type="primary" @click="handleSaveInvoice()">保 存</el-button>
        </div>

      </div>

    </el-dialog>

  </div>
</template>

<script>
import SelectArea from '@/components/SelectArea'
import {insertInvoice,updateInvoice,deleteInvoice,getInvoiceList,getInvoiceInfo} from '@/api/member'
export default {
  name: 'MemberInvoice',
  components: {
    SelectArea
  },
  data() {
    const checkIdentification = (rule, value, callback) => {
     if (value === '') {
       callback(new Error('请输入纳税人识别号'))
     } else {
       if(!/^[a-zA-Z\d]{15,18}$/.test(value)){
         callback(new Error('纳税人识别号限制15~18字符内，可使用数字、字母'))
       }else{
         callback();
       }
     }
   }


    return {
      dialogTitle:'新增发票信息',
      invoiceData:[],
      invoiceTypeIndex:0,
      invoiceInfoIndex:0,
      invoiceContIndex:0,
      dialogInvoiceInfo:false,
      invoiceType: ['普通发票','增值税专用发票'], //发票类型
      invoiceInfo: ['个人','单位'], //发票信息
      invoiceShowListTag:1,
      formInvoice: {
       title: '',
       invoiceType: 1,
       taxPayerCode: '',
       companyAddress: '',
       telephone: '',
       bankName: '',
       backAccount: ''
     },
     rulesInvoice: {
       title: [
         { required: true, message: '请输入发票抬头', trigger: 'blur' }
       ],
       taxPayerCode: [
         { required: true, validator: checkIdentification, trigger: 'blur' }
       ],
       companyAddress: [
         { required: true, message: '请输入注册地址', trigger: 'blur' }
       ],
       telephone: [
         { required: true, message: '请输入注册电话', trigger: 'blur' }
       ],
       bankName: [
         { required: true, message: '请输入开户银行', trigger: 'blur' }
       ],
       backAccount: [
         { required: true, message: '请输入银行账户', trigger: 'blur' }
       ],
     },


    }
  },
  created() {
    this.getInvoiceList();
  },
  methods: {

    // 删除发票信息
    handleDelInvoice(id){
      this.$confirm('确认删除发票信息?', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
       }).then(() => {
         deleteInvoice({id:id}).then(res =>{
           this.$message({
             type: 'success',
             message: res.msg
           });
           this.getInvoiceList();
         }).catch(error => {
           this.$message({
             type: 'error',
             message: error.response.data.msg
           });
         })

       }).catch(() => {

       });
    },


    // 取消保存
    handleCancelSave(){
      this.$confirm('是否取消保存?未保存信息将丢失', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
       }).then(() => {
         this.formInvoice = {
            title: '',
            invoiceType: 1,
            taxPayerCode: '',
            companyAddress: '',
            telephone: '',
            bankName: '',
            backAccount: ''
          };
          this.invoiceTypeIndex = 0;
          this.invoiceInfoIndex = 0;
          this.invoiceShowListTag=1;
          this.dialogInvoiceInfo = false;
       }).catch(() => {

       });
    },
    // 处理关闭按钮
    dialogInvoiceInfoClose(){
      this.formInvoice = {
         title: '',
         invoiceType: 1,
         taxPayerCode: '',
         companyAddress: '',
         telephone: '',
         bankName: '',
         backAccount: ''
       };
       this.invoiceTypeIndex = 0;
       this.invoiceInfoIndex = 0;
       this.invoiceShowListTag=1;
    },

    //点击保存发票
    handleSaveInvoice() {
        this.$refs.formInvoice.validate((valid) => {
          if (valid) {
            if(this.formInvoice.id){
              this.updateInvoice();
            }else{
              this.addInvoice();
            }

          } else {
            return false;
          }
        });
      },

    // 更新发票信息
    updateInvoice(){
      if(this.invoiceShowListTag == 1){
        this.formInvoice = {
          id:this.formInvoice.id,
          title: this.formInvoice.title,
          invoiceType: this.invoiceShowListTag
        }
      }else if(this.invoiceShowListTag == 2){
        this.formInvoice = {
          id:this.formInvoice.id,
          title: this.formInvoice.title,
          invoiceType: this.invoiceShowListTag,
          taxPayerCode: this.formInvoice.taxPayerCode
        }
      }
      this.formInvoice.invoiceType = this.invoiceShowListTag;
      updateInvoice(this.formInvoice).then(res =>{
        this.$message({
          type: 'success',
          message: res.msg
        });
        this.dialogInvoiceInfo = false;
        this.formInvoice = {
           title: '',
           invoiceType: 1,
           taxPayerCode: '',
           companyAddress: '',
           telephone: '',
           bankName: '',
           backAccount: ''
         };
         this.invoiceTypeIndex = 0;
         this.invoiceInfoIndex = 0;
         this.invoiceShowListTag=1;
        this.getInvoiceList();
      }).catch(error => {
        this.$message({
          type: 'error',
          message: error.response.data.msg
        });
      })

    },

    //添加发票
    addInvoice() {
      if(this.invoiceShowListTag == 1){
        this.formInvoice = {
          title: this.formInvoice.title,
          invoiceType: this.invoiceShowListTag
        }
      }else if(this.invoiceShowListTag == 2){
        this.formInvoice = {
          title: this.formInvoice.title,
          invoiceType: this.invoiceShowListTag,
          taxPayerCode: this.formInvoice.taxPayerCode
        }
      }
      this.formInvoice.invoiceType = this.invoiceShowListTag;
      insertInvoice(this.formInvoice).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        });
        this.dialogInvoiceInfo = false;
        this.formInvoice = {
           title: '',
           invoiceType: 1,
           taxPayerCode: '',
           companyAddress: '',
           telephone: '',
           bankName: '',
           backAccount: ''
         };
         this.invoiceTypeIndex = 0;
         this.invoiceInfoIndex = 0;
         this.invoiceShowListTag=1;
        this.getInvoiceList();
      }).catch(error => {
        this.$message({
          type: 'error',
          message: error.response.data.msg
        });
      })
    },



    //切换发票类型显示对应的发票列表数据
      invoiceMatchingData() {
        if(this.invoiceTypeIndex == 0){ //普通发票
          if(this.invoiceInfoIndex == 0){ //个人
            this.invoiceShowListTag = 1
          }else{ //单位
            this.invoiceShowListTag = 2
          }
        }else if(this.invoiceTypeIndex == 1){ //增值税专用发票
          this.invoiceShowListTag = 3;
          console.log(this.invoiceShowListTag+'----------');
        }
      },


    //切换发票类型
    handleChangeInvoiceType(index) {
      this.invoiceTypeIndex = index;
      this.invoiceMatchingData();
    },
    //切换发票信息
    handleChangeInvoiceInfo(index) {
      this.invoiceInfoIndex = index;
      this.invoiceMatchingData();
    },
    //切换发票内容
    handleChangeInvoiceCont(index) {
      this.invoiceContIndex = index;
      this.invoiceMatchingData();

    },
    // 展示新增编辑发票信息
    handleShowDialogInvoice(){
      this.dialogTitle='新增发票信息';
      this.dialogInvoiceInfo = true;
    },

    handleLook(item){
      this.dialogTitle='编辑发票信息';
      this.dialogInvoiceInfo = true;
      this.formInvoice = item;
      this.invoiceShowListTag = item.invoiceType;
      if(item.invoiceType == 1){
        this.invoiceTypeIndex = 0;
        this.invoiceInfoIndex = 0;
      }else if(item.invoiceType == 2){
        this.invoiceTypeIndex = 0;
        this.invoiceInfoIndex = 1;
      }else{
        this.invoiceTypeIndex = 1;
      }

    },
    getInvoiceList(){
      getInvoiceList().then(res =>{
        if(res.code == 200){
          this.invoiceData = res.data;
        }
      })
    },

  },
  filters:{
    // 过滤发票类型
    invoiceTypes(value){
      if (!value) return ''
      if(value == 1){
        return '普通发票-个人'
      }else if(value == 2){
        return '普通发票-单位'
      }else if(value == 3){
        return '增值税专用发票'
      }
    },
  }



}


</script>

<style lang="scss">

.invoice-container{
  margin-left: 200px;
  margin-top: 20px;
  margin-bottom: 20px;
  .el-dialog {
    position: relative;
    margin: 0 auto;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-sizing: border-box;
    width: 50%;
  }
}

.invoice-nodata{
  text-align: center;
  padding: 30px 0;
  min-height: 320px;
  img{
    margin-top: 30px;
  }
  p{
    margin-top: -40px;
  }
}
.invoice-table {
    width: 910px;
    margin-left: 40px;
    border: #D9D9D9 1px solid;
    margin-bottom: 40px;

    .delete-button{
      .el-button.is-plain:focus,.el-button.is-plain:hover{
        color:red;
        margin-left: 10px;
      }
      .el-button{
        color:red;
        margin-left: 10px;
      }
    }
    li{
      display: inline-block;
      width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: text-top;
    }
}

.add-invoice{
  .el-button.is-plain:focus,.el-button.is-plain:hover{
    background-color: #D3DEE8;
    border: 1px solid #255B8A;
  }
  button{
    height: 34px;
    margin: 30px auto 20px 40px;
    width: 100px;
    padding: 0;
    background-color: #D3DEE8;
    border: 1px solid #255B8A;
    span{
      color: #255B8A;
      font-size: 12px;
    }
  }
}

.el-table ul li span{
  width: 150px;
  display: inline-block;
  text-align: right;
}

.form-invoice-dialog{
  .el-dialog__header {
    text-align: center;
    background-color: #EEEEEE;
    border-radius: 10px 10px 0px 0px;
  }

  .invoice-info{
  	padding: 0 20px;
    .info-title{
      font-size: 18px;
      color: #333;

      img{
      	display: inline-block;
      	vertical-align: top;
      	margin: 5px 4px 0 10px;
      }

    }
    .info-list{
    	margin: 20px 0 30px;
    	span{
    		display: inline-block;
		    vertical-align: top;
		    padding: 0 20px;
		    line-height: 38px;
		    border: 1px solid #ddd;
		    font-size: 14px;
		    color: #333;
		    background: #fff;
		    margin-right: 30px;
		    position: relative;
		    cursor: pointer;
		    .icon{
		    	width: 20px;
			    height: 20px;
			    position: absolute;
			    right: 0;
			    bottom: 0;
			    display: none;
		    }
		    &.active{
		    	color: #255B8B;
			    background: #f3faff;
			    border-color: #255B8B;
			    .icon{
			    	display: block;
			    }
		    }
    	}
    }

    .add-invoice-info {
      padding: 20px;
      margin-top: 30px;
      border: black 1px solid;
      border-radius: 6px;

      .el-form-item {
        margin-bottom: 20px;
        margin-top: 20px;
      }
    }

    .dialog-footer {
      text-align: center;
      margin-top: 30px;
      .el-button{
        width: 150px;
      }
    }

  }
}


</style>
